<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
<!--自动检测屏幕大小-->		
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">		
		
		<title></title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap.css"/>
		<script src="js/jquery-3.2.0.min.js"></script>
		<script src="js/bootstrap.js"></script>
		
		
	</head>
	<body class="container">
		<h3 class="page-header text-center">标签页</h3>
		
		<p>data-toggle="tab" 标签执行 tab</p>
		<p>..tab-content 标签内容区</p>
		<p>..tab-pane 每个标签</p>
		<p>..fade 淡入</p>
		<p>..in 淡出</p>
		
		
<!--*********************************************************************************-->		
		<div class="navbar">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#aaa" data-toggle="tab">111</a></li>
				<li class=""><a href="#bbb" data-toggle="tab">222</a></li>
				<li class=""><a href="#ccc" data-toggle="tab">333</a></li>
			</ul>
		</div>
		
		<!--标签内容部分-->
		<div class="tab-content">
			<div id="aaa" class="tab-pane active">1111111111111111111</div>
			<div id="bbb" class="tab-pane">2222222222222222222</div>
			<div id="ccc" class="tab-pane">3333333333333333333</div>
		</div>
		
		
		
		<hr />
		<p>淡入淡出，下拉菜单</p>		
<!--*********************************************************************************-->		
		<div class="navbar">
			<ul class="nav nav-tabs">
				<li class="active"><a href="#ddd" data-toggle="tab">111</a></li>
				<li class=""><a href="#eee" data-toggle="tab">222</a></li>
				
				<li class="dropdown">
					<a href="#" id="myTabDrop1" class="dropdown-toggle" data-toggle="dropdown" aria-controls="myTabDrop1-contents" aria-expanded="false">下拉 <span class="caret"></span>
					</a>
					<ul class="dropdown-menu" aria-labelledby="myTabDrop1" id="myTabDrop1-contents">
          				<li class=""><a href="#fff" role="tab" id="dropdown1-tab" data-toggle="tab" aria-controls="dropdown1" aria-expanded="true">下拉内容1</a></li>
          				
          				<li class=""><a href="#ggg" role="tab" id="dropdown2-tab" data-toggle="tab" aria-controls="dropdown2" aria-expanded="false">下拉内容2</a></li>
        			</ul>
				</li>
				
			</ul>
		</div>
		
		<div class="tab-content">
			<div id="ddd" class="tab-pane fade in active">..fade 淡入， ..in 淡出</div>
			<div id="eee" class="tab-pane fade">..fade 淡入， ..in 淡出</div>
			<div id="fff" class="tab-pane fade">000000000000</div>
			<div id="ggg" class="tab-pane fade">111111111111</div>
			
		</div>
		
		
		
		
		
		
	</body>
</html>
